<template>
  <view :class="['container', { dark: theme == 'dark' }]">
    <view :class="['fixedTop', { dark: theme == 'dark' }]">
      <view :class="['top', { dark: theme == 'dark' }]">
        <view class="flex totalView">
          <view class="totalText">{{ $t('bico.W113') }}</view>
          <text
            v-if="eyesFlag"
            class="iconfont icon-yanjing2"
            @click="eyesFlag = false"
          ></text>
          <text
            v-else
            class="iconfont icon-yanjing3"
            @click="eyesFlag = true"
          ></text>
        </view>
        <view class="flex botalNumView">
          <view class="botalNumView1">{{ eyesFlag ? totalPrice : '******' }}</view>
          <!--view class="botalNumView2" v-if="eyesFlag"> ≈ {{cny}} CNY</view-->
        </view>
        <view
          class="list wwww"
          v-if="istype()"
        >
          <view :class="['listItems', { darksscs: theme == 'dark' }]">
            <view class="flex listItemCC">
              <view>{{ $t('home.today_income') }}</view>
              <view class="">{{ $t('home.total_income') }}</view>
            </view>
            <view class="flex listItemBB">
              <view :class="[{ green: incomeTotal >= 0 }, { red: incomeTotal < 0 }]"
                >{{ incomeTotal }}$</view
              >

              <view :class="[{ green: incomeTotals >= 0 }, { red: incomeTotals < 0 }]"
                >{{ incomeTotals }}$</view
              >
            </view>
          </view>
        </view>
        <view class="flex opts">
          <view
            class="flex optsItem optsItem1"
            @click="optClick(1)"
          >
            <text class="iconfont icon-tibi1"></text>
            <view class="optsItemText">{{ $t('bico.W114') }}</view>
          </view>
          <view
            class="flex optsItem optsItem2"
            @click="optClick(2)"
          >
            <text class="iconfont icon-chongbi2"></text>
            <view class="optsItemText">{{ $t('bico.W115') }}</view>
          </view>
          <view
            class="flex optsItem optsItem3"
            @click="optClick(3)"
          >
            <text class="iconfont icon-xiaoxi5"></text>
            <view class="optsItemText">{{ $t('bico.W116') }}</view>
          </view>
          <view
            class="flex optsItem optsItem4"
            @click="optClick(4)"
          >
            <text class="iconfont icon-xunhuanxuyuezhuanzhang"></text>
            <view class="optsItemText">{{ $t('bico.W117') }}</view>
          </view>
        </view>
      </view>
      <view :class="['flex', 'acc', { accdarksscs: theme == 'dark' }]">
        <view
          :class="['accItem', tabIndex == i ? 'accItemActive' : '']"
          v-for="(tab, i) in tabBars"
          :key="i"
          :id="tab.id"
          :data-current="i"
          @click="tapTab"
          >{{ tab.name }}</view
        >
      </view>
    </view>
    <!-- <view style="height: 378rpx;"></view> -->
    <view class="llllll">
      <view :class="['tt1', { darksscs: theme == 'dark' }]">
        <view class="flex tt1b">
          <view
            class="flex"
            @click="smallChange"
          >
            <checkbox
              id="chec"
              class="chec"
              value="1"
              :checked="smallSymbol"
            ></checkbox>
            <label
              for="chec"
              class="checText"
              >{{ $t('bico.W118') }}</label
            >
          </view>
          <view class="flex">
            <view class="flex tt1bb">
              <text class="iconfont icon-search"></text>
              <input
                style="font-size: 12px"
                class="input"
                v-model="searchValue"
                type="text"
                :placeholder="$t('bico.W120')"
              />
            </view>
            <view
              class="searchBtn"
              @click="searchBtn"
              style="font-size: 12px"
              >{{ $t('bico.W119') }}</view
            >
          </view>
        </view>
      </view>

      <view class="list">
        <view
          :class="['listItem', { darksscs: theme == 'dark' }]"
          v-for="(changeItem, index2) in tableData1"
          :key="index2"
          @click="listItemClick(changeItem)"
        >
          <view class="flex listItemT">
            <view class="listItemTV">
              <image
                :src="changeItem.img"
                style="width: 5vw; height: 5vw"
              ></image>
            </view>
            <view class="listItemTV">{{ changeItem.type }}</view>
            <text class="iconfont icon-right-1-copy"></text>
          </view>
          <view class="flex listItemC">
            <view>{{ $t('bico.W121') }}</view>
            <view class="tr4">{{ $t('bico.W122') }}</view>
            <view class="right">{{ $t('bico.W123') }}</view>
          </view>
          <view class="flex listItemB">
            <view>
              <view>{{ (1 * changeItem.usedPrice).toFixed(point) }}</view>
              <view
                class="fsml"
                v-if="changeItem.type == 'USDT'"
                >({{ (1 * changeItem.usedPrice).toFixed(2) }}$)</view
              >
              <view
                class="fsml"
                v-else
                >({{ (changeItem.close * changeItem.usedPrice).toFixed(2) }}$)</view
              >
            </view>
            <view class="tr4">{{
              (changeItem.totalPrice - changeItem.usedPrice).toFixed(point)
            }}</view>
            <!-- 总共列， .toFixed(4) 表示保留四位小数-->
            <view class="right gggg">{{ Number(changeItem.totalPrice).toFixed(point) }}</view>
          </view>

          <template v-if="issigntype(changeItem)">
            <view class="flex listItemC">
              <view>{{ $t('home.today_income') }}</view>
              <view>{{ $t('home.yield_rate') }}</view>
              <view></view>
              <view></view>
            </view>
            <view class="flex listItemB">
              <view :class="[{ green: changeItem.income >= 0 }, { red: changeItem.income < 0 }]"
                >{{ (1 * changeItem.income).toFixed(point) }}$</view
              >
              <view :class="[{ green: changeItem.income >= 0 }, { red: changeItem.income < 0 }]">{{
                changeItem.incomeRate
              }}</view>
              <view></view>
              <view></view>
            </view>

            <view class="flex listItemC">
              <view>{{ $t('home.new_price') }}</view>
              <view>{{ $t('home.cost_price') }}</view>
              <view></view>
              <view></view>
            </view>
            <view class="flex listItemB">
              <view>{{ (1 * changeItem.close).toFixed(point) }}$</view>
              <view v-if="!changeItem.cost">----</view>
              <view
                v-else
                :class="[{ green: changeItem.income >= 0 }, { red: changeItem.income < 0 }]"
                >{{ (1 * changeItem.cost).toFixed(point) }}$</view
              >
              <view></view>
              <view></view>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { wallet } from '../../common/apiString.js';
export default {
  data() {
    return {
      smallSymbol: false,
      searchValue: '',
      eyesFlag: true,
      accItemActiveIndex: 0,
      totalPrice: 0,
      incomeTotalRate: '',
      incomeTotal: 0,
      incomeTotals: 0,
      cny: 0,
      point: 4,
      tableData: [],
      tableData1: [],
      isFinger: '0',
      isface: '0',
      scrollLeft: 0,
      isClickChange: false,
      tabIndex: 0,
      tabBars: [
        {
          //钱包
          name: this.$t('bico.W278'),
          id: 'WALLET',
          contractType: 0
        },
        // {
        //   //币币
        //   name: this.$t('bico.W279'),
        //   id: 'CURRENCY',
        //   contractType: 0
        // },
        {
          //合约
          name: this.$t('bico.W280'),
          id: 'CONTRACT',
          contractType: 0
        },
        // {
        //   // 保险
        //   name: this.$t('assets.lever3'),
        //   id: 'insurance',
        //   contractType: 1
        // },
        {
          //期权
          name: this.$t('bico.W282'),
          id: 'OPTION'
        },
		{
		  //法币
		  name: this.$t('bico.W822'),
		  id: 'LEGAL'
		},
		{
		  //现货合约
		  name: this.$t('bico.W823'),
		  id: 'ROBOT'
		}

        // {
        //   //矿机
        //   name: this.$t('bico.W800'),
        //   id: 'MINING'
        // }
      ],
      isClose: false,
      tabBg: 'bg1',
      closeAccount: '****',

      triggered: false
    };
  },

  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },

  onLoad() {
    if (uni.getStorageSync('token') && !uni.getStorageSync('isFinger')) {
      this.isFinger = uni.getStorageSync('fingerBool');
      this.isface = uni.getStorageSync('isface');
      if (this.isFinger) {
        uni.hideTabBar();
      }
    }

    uni.setNavigationBarTitle({
      title: this.$t('bico.W124')
    });
    // this.getAssets();
    // this.changeFooter();
    this._freshing = false;
  },
  onPullDownRefresh() {
    console.log('1345879');
    this.getAssets();
  },
  mounted() {
    this.getAssets();
  },
  onShow() {
    console.log(this.tabBars);
    // this.getAssets();
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#ffffff',
      title: this.$t('bico.W283')
    });
    this.$utils.setTheme(this.theme);
  },
  methods: {
    smallChange() {
      this.searchValue = '';
      this.smallSymbol = !this.smallSymbol;
      if (this.smallSymbol) {
        this.tableData1 = this.tableData.filter(v => Number(v.totalPrice) > 0);
      } else {
        this.getAssets();
      }
    },
    istype() {
      if (
        this.tabBars[this.tabIndex].id == 'CONTRACT' ||
        this.tabBars[this.tabIndex].id == 'OPTION' ||
        this.tabBars[this.tabIndex].id == 'WALLET' ||
        this.tabBars[this.tabIndex].id == 'CURRENCY' ||
		this.tabBars[this.tabIndex].id == 'LEGAL'||
		this.tabBars[this.tabIndex].id == 'ROBOT'
      ) {
        return true;
      }
      return false;
    },
    issigntype(changeItem) {
      if (this.tabBars[this.tabIndex].id == 'CURRENCY' && changeItem.type != 'USDT') {
        return true;
      }
      return false;
    },
    searchBtn() {
      this.smallSymbol = false;
      if (this.searchValue) {
        this.tableData1 = this.tableData.filter(
          v => String(v.type).toLocaleUpperCase() === String(this.searchValue).toLocaleUpperCase()
        );
      } else {
        this.getAssets();
      }
    },
    optClick(index) {
      if (index == 1) {
        uni.navigateTo({
          url: '/pages/assets/charge' //冲币
        });
      }
      if (index == 2) {
        uni.navigateTo({
          url: '/pages/assets/mention' //提币
        });
      }
      if (index == 3) {
        uni.navigateTo({
          url: '/pages/assets/Assetrecords' //资产记录
        });
      }
      if (index == 4) {
        uni.navigateTo({
          url: '/pages/assets/transfer' //划转
        });
      }
    },
    listItemClick(item) {
      uni.navigateTo({
        url: `/pages/assets/tradeAccount?currency=${item.type}&type=${this.tabIndex}`
      });
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.getAssets();
    },
    onRestore() {
      this.triggered = 'restore'; // 需要重置
    },

    close(index1, index2) {
      uni.showModal({
        content: '是否删除本条信息？',
        success: res => {
          if (res.confirm) {
            this.newsitems[index1].data.splice(index2, 1);
          }
        }
      });
    },
    //没用上开始
    async changeTab(e) {
      let index = e.target.current;
      this.tabBg = 'bg' + (index + 1);
      if (this.isClickChange) {
        this.tabIndex = index;
        this.isClickChange = false;
        return;
      }
      let tabBar = await this.getElSize('tab-bar'),
        tabBarScrollLeft = tabBar.scrollLeft;
      let width = 0;

      for (let i = 0; i < index; i++) {
        let result = await this.getElSize(this.tabBars[i].id);
        width += result.width;
      }
      let winWidth = uni.getSystemInfoSync().windowWidth,
        nowElement = await this.getElSize(this.tabBars[index].id),
        nowWidth = nowElement.width;
      if (width + nowWidth - tabBarScrollLeft > winWidth) {
        this.scrollLeft = width + nowWidth - winWidth;
      }
      if (width < tabBarScrollLeft) {
        this.scrollLeft = width;
      }
      this.isClickChange = false;
      this.tabIndex = index; //一旦访问data就会出问题
    },
    getElSize(id) {
      //得到元素的size
      return new Promise((res, rej) => {
        uni
          .createSelectorQuery()
          .select('#' + id)
          .fields(
            {
              size: true,
              scrollOffset: true
            },
            data => {
              res(data);
            }
          )
          .exec();
      });
    },
    // tab切换按钮
    async tapTab(e) {
      //点击tab-bar
      let tabIndex = e.target.dataset.current;
      if (this.tabIndex === tabIndex) {
        return false;
      } else {
        // let tabBar = await this.getElSize("tab-bar"),
        // 	tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
        //this.scrollLeft = tabBarScrollLeft;
        //this.isClickChange = true;
        this.tabIndex = tabIndex;
      }
      //this.tabBg='bg'+(tabIndex+1)
      this.getAssets();
    },
    resovleWallet(data) {
      // 前端改变币种顺序
      let outputBalance = [];
      let keyword = ['USDT(erc20)', 'ETH', 'BTC', 'USDT', 'HT'];
      keyword.forEach(element =>
        outputBalance.push(data.balance.find(entry => entry.currency_name === element))
      );
      outputBalance = outputBalance.concat(
        data.balance.filter(function (entry) {
          return !keyword.includes(entry.currency_name);
        })
      );
      data.balance = outputBalance.filter(entry => entry !== undefined);

      // console.log('????', data);
      return data;
    },
    getAssets() {
      this.walletFun();
    },

    walletFun() {
      let that = this;
      let txt = that.tabBars[that.tabIndex].id;
      let contractType = that.tabBars[that.tabIndex].contractType;
      let dto = {
        valuation: 'USDT',
        hide: 'N',
        type: txt,
        contractType: contractType
      };

      this.$utils.initDataToken({ url: wallet, data: dto, type: 'get' }, (res, msg) => {
        uni.stopPullDownRefresh();
        var obj = res;
        that.incomeTotal = Number(obj.incomeTotal).toFixed(that.point);
        that.incomeTotalRate = obj.incomeTotalRate;
        that.incomeTotals = Number(obj.incomeTotals).toFixed(that.point);
        that.totalPrice = Number(obj.valuationTotalPrice).toFixed(that.point);
        that.cny = obj.cny.toFixed(that.point);
        that.tableData = obj.list;
        that.tableData1 = obj.list;

        if (this.smallSymbol) {
          this.tableData1 = this.tableData.filter(v => Number(v.totalPrice) > 0);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.fixedTop {
  width: 100%;
  /* position: fixed; */
  top: 0vw;
  left: 0;
  z-index: 10;
}
.searchBtn {
  color: #808080;
  margin-left: 4vw;
  line-height: 5.5vw;
  padding: 1.3vw 0.5vw 1vw 2.5vw;
  width: 15vw;
  font-size: 3vw;
  height: 8vw;
  border: solid 1px #dadce8;
  border-radius: 1vw;
}
.flex {
  display: flex;
  align-items: center;
}
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.llllll {
  padding-top: 0vw;
}
.gggg {
  color: #999;
}
.right {
  text-align: right;
}
.wwww {
  color: white;
}
.listItemB > view {
  font-weight: bold;
  flex: 1;
  font-size: 14px;
}
.listItemC {
  padding: 24rpx 0 10rpx;
}
.listItemC > view {
  color: #7e808c;
  flex: 1;
  font-size: 3vw;
}
.listItemBB {
  text-align: center;
}
.listItemBB > view {
  padding: 24rpx 0 10rpx;
  font-weight: 900;
  flex: 1;
  font-size: 5vw;
}
.fsml {
  font-size: 12px;
}
.listItemCC {
  padding: 24rpx 0 10rpx;
  text-align: center;
}
.listItemCC > view {
  color: white;
  flex: 1;
  font-size: 5vw;
}
.listItems {
  padding: 5vw 0;
  border-bottom: solid 1rpx #f8f8f8;
}
.listItem {
  padding: 3vw 0;
  border-bottom: solid 1rpx #f8f8f8;
}
.listItem:last-child {
  padding: 3vw 0 50px 0;
  border-bottom: solid 0.5px #f8f8f8;
}
.darksscs {
  border-bottom: solid 0.5px #37394059 !important;
}
.accdarksscs {
  background-color: #061623 !important;
  border-bottom: solid 6rpx #333 !important;
}
.listItemT {
  justify-content: space-between;
}
.listItemTV {
  font-weight: bold;
  font-size: 28rpx;
  font-family: Times New Roman, Times, serif;
}

.icon-right-1-copy {
  font-size: 26rpx;
  color: #999;
}
.list {
  padding: 0 32rpx;
}
.tt1b {
  padding-top: 0px;
  justify-content: space-between;
}
.icon-search {
  font-size: 20rpx;
}
.tt1bb {
  padding: 1.3vw 3.5vw 1vw 4vw;
  width: 20vw;
  height: 8vw;
  border: solid 1px #dadce8;
  border-radius: 1vw;
}
.input {
  flex: 1;
  padding-left: 14rpx;
}
.chec {
  transform: scale(0.7);
}
.checText {
  font-size: 12px;
  color: grey;
}
.tt1 {
  padding: 0vw 4vw 4vw;
  border-bottom: solid 0.5px #f8f8f8;
}
.tt1t {
  color: #999;
  font-size: 30rpx;
}
.tt1t11 {
  color: #000;
  font-size: 38rpx;
  margin-right: 10rpx;
}
.tt1t1 {
  align-items: baseline;
}
.tt1t12 {
  color: #999;
}
.acc {
  border-bottom: solid 3px #f8f8f8;
  text-align: center;
  justify-content: space-around;
  border-radius: 3vw 3vw 0vw 0vw;
  background-color: #fff;
  padding: 4vw 0vw 0vw;
  position: relative;
  top: -6vw;
}
.accItem {
  position: relative;
  top: 1vw;
  padding-bottom: 4vw;
  font-size: 3.6vw;
  font-weight: 400;
  text-align: center;
  /* color: #424242; */
  border-bottom: solid 6rpx transparent;
}
.accItemActive {
  color: #3e38ec;
  border-bottom: solid 6rpx #3e38ec;
}
.opts {
  padding: 4vw 0vw 10vw 0vw;
  border-top: solid 1rpx rgba(0, 0, 0, 0.1);
  justify-content: space-between;
}
.optsItem {
  color: #f3f3f3;
  flex: 1;
  justify-content: center;
}
.optsItem2 {
  border-left: solid 1rpx #e9e9e9;
  border-right: solid 1rpx #e9e9e9;
}
.optsItem3 {
  border-right: solid 1rpx #e9e9e9;
}
.optsItemText {
  margin-left: 2vw;
  font-size: 3.6vw;
  font-weight: 400;
}
.top {
  padding: 12vw 0 0;
  background-color: #3e38ec;
}
.totalView {
  padding: 0vw 5vw;
  color: #fff;
  position: absolute;
  top: 4vw;
  left: 0;
}
.totalText {
  font-size: 18px;
  font-weight: bold;
  font-family: Times New Roman, Times, serif;
}
.icon-yanjing2 {
  color: #fff;
  margin-left: 20rpx;
  font-size: 24rpx;
}
.icon-yanjing3 {
  color: #fff;
  margin-left: 20rpx;
  font-size: 36rpx;
}
.botalNumView {
  padding: 0vw 4vw 4vw 5vw;
  align-items: baseline;
}
.botalNumView1 {
  color: #fff;
  margin-right: 10rpx;
  font-size: 40rpx;
  font-weight: 400;
}
.botalNumView2 {
  color: #d3d7ec;
}
.tr4 {
  text-align: right;
  position: relative;
  left: -12vw;
}
</style>
